<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  
        <title>Railway Official Website</title>
        <link rel="stylesheet" href="css/foundation.css"/>
        <link rel="stylesheet" href="css/normalize.css"/>
        <link rel="stylesheet" href="css/jquery-ui.css" />
        <script src="js/vendor/jquery.js"></script>
        <script src="js/ui/jquery-ui.js"></script>
        <script src="js/vendor/custom.modernizr.js"></script>
        <script type="text/javascript">
            function nonEmptyValidation(element) {
                var elementLength = element.value.length;
                var info = document.getElementById(element.id + "Err");
                if (elementLength === 0) {
                    $('#' + element.id).addClass('error');
                    $("#" + info.id).text("Required Field").show();
                    return false;
                } else {
                    $('#' + element.id).removeClass('error');
                    $('#' + info.id).hide();
                    return true;
                }
            }

            function validateUser(element) {
                var regExp = /^[A-Za-z]|\s+$/;
                var info = document.getElementById(element.id + "Err");
                if (nonEmptyValidation(element)) {
                    if (element.value.match(regExp)) {
                        return true;
                    } else {
                        $('#' + element.id).addClass('error');
                        $("#" + info.id).text("Username should contain alphabet only").show();
                        return false;
                    }
                } else {
                    return false;
                }
            }

            function submitForm() {
                var docHeight = $(window).height();
                $('#overlay').fadeIn('fast').height(docHeight);
                $.ajax({
                    type: 'POST',
                    url: 'userAction.php',
                    data: $('#pwform').serialize(),
                    success: function(result) {
                        if (!result.error) {
                            $('#overlay').fadeOut('fast');
                            $('#info').fadeIn('slow').delay(4000).addClass('success').removeClass('alert').html(result.message).fadeOut('slow');
                            $('#pwform').each(function() {
                                this.reset();
                            });
                        } else {
                            $('#overlay').fadeOut('fast');
                            $('#info').fadeIn('slow').delay(4000).addClass('alert').removeClass('success').html(result.message).fadeOut('slow');
                        }
                    }
                });
            }
            ;
        </script>
    </head>
    <body>
        <div id='overlay' style="display:none; opacity: 0.4;position: fixed;top: 0;left: 0;background-color: black;width: 100%;z-index: 5000;">
            <img src="img/loader.gif" style="opacity:1; position: absolute; top: 50%;left: 50%;margin-left:-16px;
                 margin-top:-16px';"/>
        </div>
        <div>
            <nav class="top-bar">
                <ul class="title-area">
                    <li class="name" onClick="void(0);">
                        <h1><a href="#">Railway Official Website</a></h1>
                    </li>
                    <li class="divider"></li>
                    <li class="toggle-topbar menu-icon">
                        <a href="#"><span>menu</span></a>
                    </li>
                </ul>
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="divider"></li>
                        <li><a href="index.php">Home</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Forum</a></li>
                        <li class="divider"></li>
                        <li><a href="loginPage.php">Login</a></li>
                        <li class="divider"></li>
                    </ul>
                </section>
            </nav>
        </div>
        <div class="row">
            <div id="info" data-alert class="large-8 columns large-offset-2 alert-box" style="display: none">

            </div>
        </div>
        <div class="row">
            <div class="large-8 columns large-offset-2">
                <h4>Forget Password</h4>
                <form id="pwform" class="custom" method="post" action="" >
                    <fieldset>
                        <div class="row">
                            <input type="hidden" name="action" value="forgetPassword"/>
                            <div class="large-3 columns">
                                <label for="user" class="inline">Username</label>
                            </div>
                            <div class="large-1 columns">
                                <label class="inline">:</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="user" name="user" type="text" placeholder="Enter your username" onblur="validateUser(this);"/>
                                <small id="userErr" class="error" style="display: none"></small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-3 columns">
                                <label for="question" class="inline">Security Question</label>
                            </div>
                            <div class="large-1 columns">
                                <label class="inline">:</label>
                            </div>
                            <div class="large-8 columns">
                                <select id="question" name="question">
                                    <option disabled>Select an option</option>
                                    <option value="What was your childhood nickname?">What was your childhood nickname?</option>
                                    <option value="What street did you live on in third grade?">What street did you live on in third grade?</option>
                                    <option value="In what city or town did your mother and father meet?">In what city or town did your mother and father meet? </option>
                                    <option value="What was the last name of your third grade teacher?">What was the last name of your third grade teacher?</option>
                                    <option value="What time of the day were you born?">What time of the day were you born?</option>
                                    <option value="In what city or town was your first job?">In what city or town was your first job?</option>
                                    <option value="What was your favorite place to visit as a child?">What was your favorite place to visit as a child?</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="large-3 columns">
                                <label for="answer" class="inline">Answer</label>
                            </div>
                            <div class="large-1 columns">
                                <label class="inline">:</label>
                            </div>
                            <div class="large-8 columns">
                                <input id="answer" name="answer" type="text" placeholder="Enter security question's answer" onblur="nonEmptyValidation(this)"/>
                                <small id='answerErr' class='error' style='display: none'></small>
                            </div>
                        </div>
                        <hr/>
                        <div class="row">
                            <div class="large-12 columns">
                                <input id="submit" type="button" value="Submit" class="right small button" onclick="submitForm();"/>
                            </div>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
        <footer class="row">
            <div class="large-12 columns">
                <hr />
                <div class="row">
                    <div class="large-4 columns">
                        <p>&copy; Copyright 2013.</p>
                    </div>
                    <div class="large-6 columns">
                        <ul class="inline-list right">
                            <li><a href="aboutus.php">About Us</a></li>
                            <li><a href="contactus.php">Contact Us</a></li>
                            <li><a href="terms.php">Terms and Condition</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
        <script src="js/foundation.min.js"></script>
        <script>
            $(document).foundation();
        </script>
    </body>
</html>